﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>设备添加</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="css/common2.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.time-state {
			width: 220px;
			margin-left: 110px;
		}

		.time-state input {
			display: none;
		}

		.time-state label {
			position: relative;
		}

		.time-state label::before {
			display: inline-block;
			content: "";
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 1px solid #73c7ec;
			background-color: white;
			margin-right: 6px;
		}

		.time-state input:checked+label::before {
			background-color: #73c7ec;
		}

		.time-state input:checked+label::after {
			display: inline-block;
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			position: absolute;
			left: 6px;
			bottom: 6px;
		}

		.vs--searchable .vs__dropdown-toggle {
			display: inline-block;
			min-height: 36px;
			border-color: #D2D2D2;
			width: 70% !important;
			border: 1px solid #B2B2B2;
			background-color: white !important;
			color: black !important;
			padding-left: 10px;
			height: 38px;
			line-height: 1.3;
		}

		.vs__actions {
			display: none;
		}

		.vs__dropdown-menu {
			margin-left: 27px;
			width: 70%;
		}

		.vs__selected-options {
			height: 100%;
		}
	</style>
</head>

<body>

	<div class="layui-row" id="vue-root">
		<div></div>
		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item">
				<label class="layui-form-label">代理商</label>
				<div class="layui-input-block">
					<select name="agent" v-validate="'required'" class="layui-input school" v-model="agentId"
						:disabled="!!item.id">
						<option :value="undefined" disabled="disabled">请选择代理商</option>
						<option v-for="agent in agents" :key="agent.id" :value="agent.id" v-text="agent.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('agent')"></div>
				</div>

			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">学校名称</label>
				<div class="layui-input-block">
					<v-select placeholder="请选择学校" label="name" :options="schools" :reduce="item=>item.id"
						v-model="item.schoolId" :disabled="!!item.id"></v-select>
					<div class="checkout_state" v-text="err('schoolName')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">设备地点</label>
				<div class="layui-input-block">
					<input name="deviceName" v-validate="'required'" autocomplete="off" placeholder="请输入设备安装地址"
						class="layui-input name" v-model="item.name">
					<div class="checkout_state" v-text="err('deviceName')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">设备编码</label>
				<div class="layui-input-block">
					<input name="deviceCode" v-validate="'required'" autocomplete="off" placeholder="请输入设备编码"
						class="layui-input tag" v-model="item.code">
					<div class="checkout_state" v-text="err('deviceCode')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-block">
					<select name="type" v-validate="'required'" class="layui-input school" v-model="item.type1"
						:disabled="fixedType">
						<option :value="undefined" disabled="disabled">请选择类型</option>
						<option v-for="(type,index) in ['打卡','人脸识别','人脸识别测温','闸机','校车']" :key="index" :value="index"
							v-text="type">
						</option>
					</select>
					<div class="checkout_state" v-text="err('type')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="remark" data-vv-as="备注" placeholder="请输入备注" class="layui-textarea text"
						v-model="item.remark"></textarea>
					<div class="checkout_state" v-text="err('remark')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">票据照片</label>
				<label for="File1">
					<img :src="img" id="portrait" style="width: 100px;height: 100px">
				</label>
				<div class="checkout_state" v-text="err('file')">
				</div>

			</div><br />
			<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
				<input type="file" id="File1" data-vv-as="图片" v-validate="'size:10240'" name="file" hidden
					accept="image/*" @change="upload" ref="file">
			</form>	

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				item: {
					schoolId: null,
					billPic: null
				},
				agents: [],
				schools: [],
				agentId: null,
				url: '/pc/device',
				fixedType: false
			},
			created: function () {
				axios.get('/pc/agent/all').then(function (res) {
					this.agents = res.data;
				}.bind(this));
				this.init();
				if (typeof params().type1 !== 'undefined') {
					this.item.type1 = params().type1;
					this.fixedType = true;
				}
			},
			methods: {
				formatData: function (data) {
					axios.get('/pc/school/' + data.schoolId).then(function (res) {
						this.agentId = res.data.agentId;
					}.bind(this));
				},
				upload() {
					axios.post('/pc/upload/device?schoolId=' + this.item.schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.item.billPic = res.data.data;
							this.$refs.file.value = '';
						}.bind(this));

				}
			},
			computed: {
				img: function () {
					if (!this.item.billPic) return '/image/upload.png';
					return '/static/' + this.item.schoolId + '/device/' + this.item.billPic;
				}
			},
			watch: {
				agentId: function (newValue, oldValue) {
					if (newValue)
						axios.get('/pc/school/all/' + newValue).then(function (res) {
							this.schools = res.data;
						}.bind(this));
				}
			}
		}));
	</script>


</body>

</html>